<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  scatterData: {
    type: Array,
    default: () => []
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      grid: {
        left: `${props?.dialogData?.fontSizeTimes === 1 ? 0 : 1}%`,
        right: '8%',
        bottom: 0,
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 18 : 10}%`,
        containLabel: true
      },
      legend: {
        x: 'center',
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 10 : 0}%`,
        itemWidth: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        itemHeight: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        textStyle: {
          color: 'white',
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
        },
        itemGap: pxToRem(30 * props?.dialogData?.fontSizeTimes),
        icon: 'rect',
        data: [
          {
            name: '供给',
            itemStyle: {
              color: '#0E81FF'
            }
          },
          {
            name: '销售',
            itemStyle: {
              color: '#5ABE52'
            }
          },
        ]
      },
      tooltip: {
        showDelay: 0,
        formatter: (params) => {
          console.log(params);
          if (['markLine', 'markPoint'].includes(params.componentType)) {
            return `${params.seriesIndex === 0 ? '供给' : '销售'}` + '<br/>' + `${params.name} ：${params.value}${params.dataIndex === 0 ? '万元' : '万㎡'}`
          }
          if (['series'].includes(params.componentType)) {
            return `${params.seriesIndex === 0 ? '供给' : '销售'}` + '<br/>' + `单价 ：${params.value[0]}万元` + '<br/>' + `面积 ：${params.value[1]}万㎡`
          }
        },
        textStyle: {
          fontSize: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 14 : 20)
        },
        axisPointer: {
          show: true,
          type: 'cross',
          lineStyle: {
            type: 'dashed',
            width: 1
          }
        }
      },
      xAxis: {
        min: 0,
        max: (value) => value.max || 10,
        name: '万元',
        axisLabel: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
          color: 'white',
        },
        nameTextStyle: {
          color: "white",
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        min: 0,
        max: (value) => value.max || 15,
        name: '万㎡',
        nameTextStyle: {
          color: "white",
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          padding: [0, 0, 0, pxToRem(10 * props?.dialogData?.fontSizeTimes)]
        },
        textStyle: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes)
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          fontWeight: 'lighter'
        }
      },
      series: [
        {
          name: '供给',
          type: 'scatter',
          symbolSize: pxToRem(5 * props?.dialogData?.fontSizeTimes),
          data: props?.scatterData?.seriesData?.[0],
          markPoint: {
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ],
            itemStyle: {
              color: '#0E81FF'
            },
            label: {
              color: '#fff'
              }
          },
          markLine: {
            lineStyle: {
              type: 'solid',
              color: '#0E81FF'
            },
            label: {
              fontSize: pxToRem(10 * props?.dialogData?.fontSizeTimes),  // 设置文字大小为14px
              color: '#fff',
              formatter: (params) => {
                return params.value + (params.dataIndex === 0 ? '元' : '㎡')
              }
            },
            data: [{type: 'average', name: '中位数', valueIndex: 0}, {type: 'average', name: '中位数', valueIndex: 1}]
          }
        },
        {
          name: '销售',
          type: 'scatter',
          symbolSize: pxToRem(5 * props?.dialogData?.fontSizeTimes),
          data: props?.scatterData?.seriesData?.[1],
          markPoint: {
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ],
            itemStyle: {
              color: '#5ABE52'
            },
            label: {
              color: '#fff'
            }
          },
          markLine: {
            lineStyle: {
              type: 'solid',
              color: '#5ABE52'
            },
            label: {
              fontSize: pxToRem(10 * props?.dialogData?.fontSizeTimes),  // 设置文字大小为14px
              color: '#fff',
              formatter: (params) => {
                return params.value + (params.dataIndex === 0 ? '元' : '㎡')
              }
            },
            data: [{type: 'average', name: '中位数', valueIndex: 0}, {type: 'average', name: '中位数', valueIndex: 1}]
          }
        },
      ]
    }
    option && myChart.value.setOption(option, true);

    myChart.value.on("legendselectChanged", (params) => {
      event.stopPropagation();
    });
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h180 {
  height: 180px;
}

.dialog-h180 {
  width: 1120px;
  height: 500px;
}
</style>